<template>
  <div class="contents">
    <div class="f1">用信管理</div>
    <div class="f2">
      <!-- 搜索栏 -->
      <div class="user-search">
        <div class="search-input">
          <span>订单编号</span>
          <input maxlength="18" type="text" placeholder="请输入订单编号" v-model="applyid" />
        </div>
        <div class="search-input">
          <span>产品名称</span>
          <input maxlength="18" type="text" placeholder="请输入产品名称" v-model="productname" />
        </div>
        <div>
          <span>项目状态</span>
          <el-select v-model="status" placeholder="请选择">
            <el-option key="2" label="审批中" value="审批中"></el-option>
            <el-option key="3" label="已放款" value="已放款"></el-option>
            <el-option key="4" label="放款拒绝" value="放款拒绝"></el-option>
            <el-option key="5" label="正常结清" value="正常结清"></el-option>
            <el-option key="6" label="逾期结清" value="逾期结清"></el-option>
          </el-select>
        </div>
      </div>
      <!-- 按钮 -->
      <div class="f2_bottom">
        <!-- <div class="btn"> -->
        <button @click="inquire">查询</button>
        <button @click="reset" class="special">重置</button>
        <!-- </div> -->
      </div>
    </div>

    <div class="table">
      <el-table
        :data="userData"
        border
        highlight-current-row
        stripe
        :header-cell-style="{
          background: '#F1F5FF',
          color: '#4D4D4D'
        }"
      >
        <el-table-column prop="num" label="序号" fixed min-width="80" align="center">
        </el-table-column>
        <el-table-column prop="oderid" label="订单编号" min-width="180" align="center">
        </el-table-column>
        <el-table-column prop="productname" label="产品名称" min-width="280" align="center">
        </el-table-column>
        <el-table-column prop="funder" label="金融机构" min-width="260" align="center">
        </el-table-column>
        <el-table-column label="授信金额（元）" min-width="210" align="center">
          <template slot-scope="scope">{{ scope.row.amount | getArea }}</template>
        </el-table-column>

        <el-table-column prop="inputdate" label="申请日期" min-width="160" align="center">
          <template slot-scope="scope">{{ scope.row.inputdate | getDate }}</template>
        </el-table-column>
        <el-table-column prop="statuss" label="项目状态" min-width="160" align="center">
          <template slot-scope="scope">{{ scope.row.statuss | getData }}</template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" min-width="150" align="center">
          <template slot-scope="scope">
            <span class="span" type="text" size="small" @click="goDetails(scope.row)"> 详情 </span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div v-if="userData" class="pagination">
        <el-pagination
          background
          layout="prev, pager, next"
          @next-click="nextClick()"
          @prev-click="prevClick()"
          @current-change="handlePageChange"
          :total="pages * pageSize"
          :current-page="pageNum"
        ></el-pagination>
        <span>共{{ pages }}页</span>
      </div>
    </div>
  </div>
</template>

<script>
import { myPostFetch } from '@/utils'

export default {
  data() {
    return {
      applyid: '', //订单编号
      productname: '', //产品名称
      status: '', //项目状态
      pageNum: 1, //当前页数
      pageSize: 10, //每页显示条数
      pages: 1, //总页数
      total: 1,
      userData: null
    }
  },
  // 过滤器
  filters: {
    getArea: function (value) {
      value = parseFloat(value)
      if (value == 0) return '-'
      if (!value) return '-'
      // 将数值截取，保留两位小数
      value = value.toFixed(2)
      // 获取整数部分
      const intPart = Math.trunc(value)
      // 整数部分处理，增加,
      const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
      // 预定义小数部分
      let floatPart = '.00'
      // 将数值截取为小数部分和整数部分
      const valueArray = value.toString().split('.')
      if (valueArray.length === 2) {
        // 有小数部分
        floatPart = valueArray[1].toString() // 取得小数部分
        return intPartFormat + '.' + floatPart
      }
      return intPartFormat + floatPart
    },
    getDate: function (value) {
      if (!value) return '-'
      if (value == 'null' || value == null || value == '' || value == ' ') return '-'
      let date = value.split(' ')[0]
      return date
    },
    getData: function (value) {
      if (value === 0) return 0
      if (value == ' ' || value == null || value == 'null' || value == '') return '-'
      return value
    }
  },

  mounted() {
    let YongXinParams = JSON.parse(localStorage.getItem('YongXinParams'))
    if (YongXinParams != null && YongXinParams != 'null') {
      this.applyid = YongXinParams.applyid
      this.productname = YongXinParams.productname
      this.status = YongXinParams.status
      this.pageNum = YongXinParams.pageNum
    }

    this.getInviteList()
  },
  methods: {
    goDetails(row) {
      localStorage.clear()
      let { applyid, productname, status, pageNum } = this
      let YongXinParams = {
        applyid: applyid,
        productname: productname,
        status: status,
        pageNum: pageNum
      }
      localStorage.setItem('YongXinParams', JSON.stringify(YongXinParams))
      let code = row.productcode.substring(0, 3)
      // 商票类
      if (code == 'CAB') {
        let status = row.status
        let producttype = row.producttype
        let spid = row.spid
        let id = row.id
        // status为审批中，producttype为贴现跳转至商票贴现
        if (
          (status == '审批中' || status == '审批拒绝') &&
          (producttype == '商票贴现' ||
            producttype == '银票贴现' ||
            producttype == '财票贴现' ||
            producttype == '财票质押' ||
            producttype == '银票质押')
        ) {
          this.$store.commit('updataDetailsId', id)
          this.$store.commit('updataDetailsSpid', spid)
          this.$router.push(`/projectDiscountDetails`)
        } else if (
          (status == '审批通过' ||
            status == '待放款' ||
            status == '已取消' ||
            status == '已放款' ||
            status == '已逾期' ||
            status == '正常结项' ||
            status == '逾期结项') &&
          (producttype == '商票贴现' ||
            producttype == '银票贴现' ||
            producttype == '财票贴现' ||
            producttype == '财票质押' ||
            producttype == '银票质押')
        ) {
          // status为审批通过，producttype为贴现跳转至商票贴现
          this.$store.commit('updataDetailsId', id)
          this.$store.commit('updataDetailsSpid', spid)
          this.$router.push(`/projectApproveEasypasteDetails`)
        } else if ((status == '审批中' || status == '审批拒绝') && producttype == '商票质押') {
          // status为审批中，producttype为质押跳转至商票质押
          this.$store.commit('updataDetailsId', id)
          this.$store.commit('updataDetailsSpid', spid)
          // this.$store.commit("updataDetailsStatus", status);
          this.$router.push(`/projectPledgeApproveDetalis`)
        } else if (
          (status == '审批通过' ||
            status == '待放款' ||
            status == '已取消' ||
            status == '已放款' ||
            status == '已逾期' ||
            status == '正常结项' ||
            status == '逾期结项') &&
          producttype == '商票质押'
        ) {
          // status为审批通过，producttype为质押跳转至商票质押
          this.$store.commit('updataDetailsId', id)
          this.$store.commit('updataDetailsSpid', spid)
          // this.$store.commit("updataDetailsStatus", status);
          this.$router.push(`/projectApprovePledgeDetails`)
        }
      }
      // 跨境类
      else if (code == 'SF0') {
        let id = row.id
        let status = row.status
        let productname = row.productname
        // 关税保函预申请详情
        if (productname == '关税保函' && (status == '待反馈' || status == '已反馈')) {
          this.$router.push(`/projectBorderDetailsGsbh?id=${id}`)
        } else if (
          // 关税E宝预申请详情
          productname == '关税E保' &&
          (status == '待反馈' || status == '已反馈')
        ) {
          this.$router.push(`/projectBorderDetails?id=${id}`)
        } else if (
          // 税信宝预申请详情
          productname == '税信保' &&
          (status == '待反馈' || status == '已反馈')
        ) {
          this.$router.push(`/projectBorderDetailsSxb?id=${id}`)
        } else if (
          // 关税保证保险详情
          productname == '关税保证保险'
        ) {
          this.$router.push(`/projectGuaranteeDetails?id=${id}`)
        } else if (
          // 关税保函正式申请详情
          (productname == '关税保函' || productname == '关税保付保函') &&
          (status == '审批中' ||
            status == '待放款' ||
            status == '审批通过' ||
            status == '审批拒绝' ||
            status == '正常结项' ||
            status == '逾期结项' ||
            status == '取消' ||
            status === null ||
            status === 'null')
        ) {
          this.$router.push(`/regularProjectGsbh?id=${id}`)
        } else if (
          // 关税E宝正式申请详情
          productname == '关税E保' &&
          (status == '审批中' ||
            status == '待放款' ||
            status == '审批通过' ||
            status == '审批拒绝' ||
            status == '正常结项' ||
            status == '逾期结项' ||
            status == '取消' ||
            status === null ||
            status === 'null')
        ) {
          this.$router.push(`/regularProjectGseb?id=${id}`)
        } else if (
          // 税信保正式申请详情
          productname == '税信保' &&
          (status == '审批中' ||
            status == '待放款' ||
            status == '审批通过' ||
            status == '审批拒绝' ||
            status == '正常结项' ||
            status == '逾期结项' ||
            status == '取消' ||
            status === null ||
            status === 'null')
        ) {
          this.$router.push(`/regularProjectSxb?id=${id}`)
        } else if (
          // 关税履约保证保险申请详情
          productname == '关税履约保证保险'
        ) {
          this.$router.push(`/projectGslyBzbx?id=${id}`)
        }
      }
      //商链类
      else if (code == 'SCF') {
        let productcode = row.productcode
        localStorage.setItem('productcode', productcode)
        if (productcode == 'SCF006001') {
          this.$store.commit('updataSLPutoutid', row.putoutid)
          this.$store.commit('updataSLStatus', row.statuss)
          this.$router.push(`/yongXinBaoLiRongZiDetails`)
        } else if (
          productcode == 'SCF003001' ||
          productcode == 'SCF003002' ||
          productcode == 'SCF013001' ||
          productcode == 'SCF014001' ||
          productcode == 'SCF018001' ||
          productcode == 'SCF020002' ||
          productcode == 'SCF024001' ||
          productcode == 'SCF015001' ||
          productcode == 'SCF028001' ||
          productcode == 'SCF025001' ||
          productcode == 'SCF026001' ||
          productcode == 'SCF019001' ||
          productcode == 'SCF017001'
        ) {
          this.$store.commit('updataSLPutoutid', row.putoutid)
          this.$store.commit('updataSLStatus', row.statuss)
          this.$router.push(`/yongXinGongHuoDaiDetails`)
        } else if (productcode == 'SCF012001') {
          this.$store.commit('updataSLPutoutid', row.putoutid)
          this.$store.commit('updataSLStatus', row.statuss)
          this.$router.push(`/yongXinChanYeEDai`)
        } else if (productcode == 'SCF012002') {
          this.$store.commit('updataSLPutoutid', row.putoutid)
          this.$store.commit('updataSLStatus', row.statuss)
          this.$router.push(`/GongChengQiXinDaiYongXinDetails`)
        } else if (productcode == 'SCF012003') {
          this.$store.commit('updataSLPutoutid', row.putoutid)
          this.$store.commit('updataSLStatus', row.statuss)
          this.$router.push(`/FuKuanChengNuoYongXinDetails`)
        } else if (productcode == 'SCF021001' || productcode == 'SCF027001') {
          this.$store.commit('updataSLPutoutid', row.putoutid)
          this.$store.commit('updataSLStatus', row.statuss)
          this.$router.push(`/projectYXSPBT`)
        }
      }
      // 普惠类
      else if (code == 'SME') {
        let productcode = row.productcode
        this.$store.commit('updataSLPutoutid', row.putoutid)
        this.$store.commit('updataSLStatus', row.statuss)
        if (
          productcode == 'SME006001' ||
          productcode == 'SME008001' ||
          productcode == 'SME007001'
        ) {
          this.$router.push(`/yongXinZBD`)
        }
      }
      setTimeout(() => {
        this.$router.go(0)
      }, 50)
    },
    // 请求接口获取白名单列表
    async getInviteList() {
      let { applyid, productname, status, pageNum, pageSize } = this
      let url = '/api/KJApply/findbussx'
      let params = {
        applyid: applyid,
        productname: productname,
        status: status,
        pageNum: pageNum,
        pageSize: pageSize
      }
      let { data } = await myPostFetch(url, params)
      if (data.list.length == 0) {
        this.userData = null
        return
      }
      this.userData = data.list
      this.pages = data.pages
      for (let i = 0; i < this.userData.length; i++) {
        this.userData[i].num = (this.pageNum - 1) * 10 + i + 1
      }
      return data
    },
    // 查询按钮
    inquire() {
      this.pageNum = 1
      localStorage.clear()
      this.getInviteList()
    },
    // 点击数字改变page的值
    handlePageChange(currentPage) {
      this.pageNum = currentPage
      this.getInviteList()
    },
    // 点击下一页
    nextClick() {
      this.pageNum += 1
    },
    // 点击上一页
    prevClick() {
      this.pageNum -= 1
    },
    // 重置
    reset() {
      this.applyid = ''
      this.productname = ''
      this.status = ''
      this.pageNum = 1
      localStorage.clear()
      this.getInviteList()
    }
  }
}
</script>

<style lang="scss" scoped>
.contents {
  box-sizing: border-box;
  padding: 0.0781rem 0.1823rem;
  .f1 {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    height: 0.2083rem;
    color: #222;
    font-size: 0.0933rem;
    font-weight: 600;
    border-bottom: 0.0052rem solid #999;
  }
  .f2 {
    background: #f5f7f9;
    box-sizing: border-box;
    padding-bottom: 0.0781rem;
    margin-bottom: 0.1042rem;
    // 搜索栏
    .user-search {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-around;
      width: 100%;
      height: 0.4167rem;
      // background: #ffffff;
      margin-top: 0.0781rem;
      span {
        font-size: 0.0833rem;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #333;
        margin: 0 0.0521rem 0 0.1042rem;
      }
      .search-input {
        display: flex;
        cursor: pointer;
        position: relative;
        align-items: center;
        // width: 1.3021rem;
        height: 0.2083rem;
        // margin-left: 15px;
        input {
          box-sizing: border-box;
          width: 1.3021rem;
          height: 0.2031rem;
          font-size: 0.0781rem;
          border: 0.0052rem solid #e0e0e0;
          color: #606266;
          outline: 0;
          padding-left: 0.026rem;
          &::placeholder {
            color: #aaa;
            font-size: 0.0781rem;
          }
        }
      }
    }
    // 按钮
    .f2_bottom {
      display: flex;
      justify-content: center;
      button {
        width: 0.5208rem;
        height: 0.1563rem;
        margin-left: 0.0781rem;
        color: #ffffff;
        background: #3f6ef2;
      }
      .special {
        color: #3f6ef2;
        background: #fff;
        border: 0.0052rem solid #3f6ef2;
      }
    }
  }
  .f3 {
    position: relative;
    height: 0.2604rem;
    margin-top: 0.0781rem;
    .btn {
      position: absolute;
      right: 0;
      button {
        width: 0.5208rem;
        height: 0.1563rem;
        margin-left: 0.0781rem;
        color: #ffffff;
        background: #3f6ef2;
      }
      .special {
        color: #3f6ef2;
        background: #fff;
        border: 0.0052rem solid #3f6ef2;
      }
    }
  }
  // .f4 {
  // 表格
  .table {
    background-color: #fff;
    cursor: pointer;
    .span {
      display: inline-block;
      width: 0.1563rem;
      height: 0.125rem;
      font-size: 0.0729rem;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #3f6ef2;
      border-bottom: 0.0052rem solid #3f6ef2;
      cursor: pointer;
      margin-right: 0.026rem;
    }
    .isdaishenpi {
      display: flex;
      justify-content: center;
      align-items: center;
      p {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.0625rem;
        width: 0.2344rem;
        height: 0.1042rem;
        color: #0052d9;
        background: #cddffd;
        border-radius: 0.0104rem;
        margin-left: 0.026rem;
      }
    }
    .state-bar {
      span {
        font-size: 0.0833rem;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #606266;
        margin-right: 0.0521rem;
      }
    }
    // 分页器
    .pagination {
      display: flex;
      align-items: center;
      padding: 0.1rem 0.1563rem 0.0521rem 0.0521rem;
      justify-content: right;
      span {
        font-size: 0.0833rem;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #666666;
        margin-top: 0.0104rem;
      }
    }
  }
}

/* 输入框样式  */
::v-deep .el-input__inner {
  box-sizing: border-box;
  width: 1.25rem;
  height: 0.2031rem;
  font-size: 0.0781rem;
  border: 0.0052rem solid #e0e0e0;
  border-radius: 0px;
  color: #606266;
  padding-left: 0.026rem;
  outline: 0;
  &::placeholder {
    color: #aaa;
    font-size: 0.0781rem;
  }
}

/* 表格 */
::v-deep .el-table {
  th.el-table__cell > .cell {
    font-size: 0.0833rem;
    font-weight: 400;
  }
  .cell {
    font-size: 0.0833rem;
  }
  .el-table__body-wrapper {
    overflow: auto;
    height: calc(100% - 85px);

    &::-webkit-scrollbar {
      width: 0; /* 纵向滚动条 宽度 */
      height: 0.0781rem; /* 横向滚动条 高度 */
    }
    &::-webkit-scrollbar-thumb {
      width: 0.0521rem; /* 横向滚动条 宽度 */
      height: 0.0781rem; /* 纵向滚动条 高度 */
      background-color: rgb(167, 164, 164);
    }
  }
}
</style>

<style lang="scss">
.el-pagination.is-background .el-pager li {
  border-radius: 0.1042rem;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #3f6ef2;
}
.el-pagination {
  font-size: 0.0833rem;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #666666;
}
.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
  background-color: transparent;
}

.el-table tr {
  height: 0.2604rem;
}
.el-table thead {
  height: 0.2604rem;
}
</style>
